<template>
  <div class="my-menu" v-show="show">
    <my-check-box 
      v-for="item of data"
      :key="item.id"
      :id="item.id"
      :checked="computedChecked(item.id)"
      @click="setChecked(item.id)"
    >
      <span>{{item.name}}</span>
      <span>{{item.score}}</span>
    </my-check-box>
  </div>
</template>

<script>
import MyCheckBox from './MyCheckBox.vue'
export default {
  name: 'MyMenu',
  components: {
    MyCheckBox
  },
  props: {
    data: Array,
    checkedData: Array,
    show: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    setChecked(id) {
      this.$emit('click', this.data.find(item => item.id === id))
    },
    computedChecked(id) {
      return this.checkedData.some(item => item.id === id);
    }
  }
}
</script>

<style lang="less" scope>
  .my-menu {
    display: block;
    width: 300px;
    border: 1px solid #333;
  }
</style>